<template>
	<view class="sum1">
		<view class="status_bar"></view>
		<view class="top" >
					 <u-icon size="50rpx" name="arrow-left" @click="toBack"></u-icon>
					 <text style="text-align: center;font-weight: bold;padding-left: 250rpx;">
						{{detailtype}}
					 </text>

		</view>
		
	
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback"
			@up="upCallback">
			<StarPostList :list="postList" :option="postOption" @selectPost="selectPost" @longpressPost="longpressPost"
				@clickUserAvatar="clickPostUserAvatar" @clickUserNickname="clickPostUserNickname"
				@clickFocusUser="clickPostFocusUser" @clickChatUser="clickPostChatUser" @clickMore="clickMore"
				@clickSharePost="clickSharePost" @clickCommentPost="clickCommentPost" @toggleLike="togglePostLike" @changeImg="changeImg">
			</StarPostList>
		</mescroll-body>
		<u-popup :show="show" mode="center" :closeable='true' round="20rpx" customStyle="width: 400rpx;height: 300rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="close">
			<view style="padding-top:60rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;">是否前往聊天界面沟通寻搭细节</view>
			<view style="padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;">
			<u-button   color="#ffdf80" style="font-size: 40rpx;color: black;" @click="requestChat">请求聊天</u-button>
			
			</view>
		</u-popup>	
		

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import StarPostList from '@/uni_modules/star-community/components/star-post-list/star-post-list.vue'
	// import { patinew } from "../../components/patinew/patinew.vue"
	export default {
		mixins: [MescrollMixin],
		components:{
			StarPostList,
			
		},

		onLoad(e) {
			// 监听事件
			// console.log(e.key);
			this.detailtype = e.key
			console.log(this.detailtype);
			this.type=parseInt(e.type)
			// uni.$on('type', this.type)
	  //  　　 uni.$once('type',(res)=>{
	  //  　　 	    that.detailtype=res
			// 	console.log('A页面传的值为:' + res);
			// });
			// console.log('A页面传的值为:' + this.detailtype);    　　

		},
		
		data() {
			return {
				downOption: {
					use: false, // 不启用mescroll下拉刷新，使用页面原生下拉刷新
				},
				type:2,
				detailtype:'',
				searchValue: '',
				show: false,
				
				postList:[],
				post:{},
				page: 1,
				
				
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					isBounce: false,
					noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					page: {
					                        
					                        size: 10 // 每页数据的数量
					                    },
					// toTop: {
					
					// 	right: '20rpx',
					// 	bottom: '140rpx',
					// 	safearea: true,
					// 	width: '80rpx',
					// 	radius: '50%',
					// }
				},
				postOption: {
					lineShow: 4, // 文本超出多少行显示省略号
				
				},
	
			}
		},
		onPullDownRefresh() {
			// console.log("123")
			this.mescroll.resetUpScroll()
			
			uni.stopPullDownRefresh()
		    uni.reLaunch({
		    	url:'/pages/partner/pat_1?key='+this.detailtype+'&type='+this.type
		    })
		},
		methods: {
        upCallback(page) {
			 console.log(page)
				try {
					if(this.search==true)
					{this.getSearchList(this.page)}
					else{
					// 请求数据列表
				    this.getPostList(this.page)
					}
					// 
					// 设置列表数据
					if (page.num == 1){
						this.postList = [] // 如果是第一页需手动制空列表	
					}

					// console.log(List)
					// this.postList = this.postList.concat(this.List)
					
					 // 追加新数据
					
					// 联网成功的回调,隐藏下拉刷新和上拉加载的状态
					this.mescroll.endSuccess(this.postList.length)
					
				} catch (err) {
					console.log(err)
				}
			},
			 onReachBottom() {
				this.page=this.page+1
				        if(this.search==true)
						{this.getSearchList(this.page)}
					else{
						let list =   this.getPostList(this.page)
						}
					},
               getSearchList(page){
				const addList = [];
				// let count=this.getCounter();
				// console.log(count);
				
				this.$H.get('articles/search?pageNum=' + page + '&pageSize=10'+'&label='+this.searchValue).then(res => {
					
					for (let i = 0; i < (res.result.per_page>res.result.last_page?res.result.last_page:res.result.per_page); i++) {
						let newPost = this.getList(res,i);
						
						
						
						addList.push(newPost);
						
					}
					
					this.postList = [...this.postList,...addList]				
					});
			},
			// 拉取帖子列表
			 getPostList(page) {
							const addList = [];
							// let count=this.getCounter();
							// console.log(count);
							
							this.$H.get('articles/queryByType?type='+this.type+'&pageNum=' + page + '&pageSize=10').then(res => {
								
								for (let i = 0; i < (res.result.per_page>res.result.last_page?res.result.last_page:res.result.per_page); i++) {
									let newPost = this.getList(res,i);
									
									
									
									addList.push(newPost);
									
								}
								
								this.postList = [...this.postList,...addList]				
								});
									
						
						},
				getList(res,i){
						
										return {
											id: res.result.data[i].id,
											user_id: res.result.data[i].userId,
											avatar: res.result.data[i].avater,
											nickname: res.result.data[i].nickName,
											createTime: res.result.data[i].createTime, 
											title: res.result.data[i].title,
											content: res.result.data[i].content,
											imgList: res.result.data[i].images,
										
											location:res.result.data[i].location,
											imgeUrl: '/static/tab-partner.png',
											
										};
									},


			
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},



			toBack(){
				uni.navigateBack()
			},
			changeImg(item){
				
				item.imgUrl="/static/succe.png"
				console.log(item.imgUrl)
				this.show=true
				this.item=item
			},
			requestChat(){
				// console.log(this.post)
				uni.navigateTo({
			
					url:'/pages/contact/chat?new=1&username='+this.item.nickname+'&title='+this.item.title+'&content='+this.item.content+'&id='+this.item.user_id+'&firstImg='+this.item.imgList[0]+'&type=0'+'&avatar='+this.item.avatar
				})
			
				},
			close(){
				this.show=false
			},

			selectPost(post) {
				// console.log(post)
				uni.navigateTo({
					url:'/pages/my_page/my_page?id='+post.id
				})
			},
			
	},
	}
</script>

<style lang="scss">
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.top{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		// justify-content: space-between;
		
	    align-items: center;
		height: 150rpx;
		padding: 0 30rpx;
		background: linear-gradient(to right,#dff0fc,#fedac4);
		
	}
	.mescroll {
	  position: fixed;
	  top: 120px;
	  bottom: 0;
	  height: auto;
	}

	.top_guide{
		height: 180rpx;
		width: 100%;
		
		
		.guide_img{
			width: 90rpx;
			height: 90rpx;
			margin-top: 90rpx;
			margin-left: 30rpx;
			display: inline-block;
			
			
		}
		.topguide{
			margin-left: -50rpx;
			margin-top: 0rpx;
			width: 600rpx;
			height: 180rpx;
			text-align: center;
			vertical-align: 40rpx;
			font-size: 40rpx;
			font-weight: bolder;
			display: inline-block;
			color: rgb(100,100,100);
			
		}
	}
	.first-line{
		display: flex;
		padding-top: 50rpx;
		margin-left: 20rpx;
		
	}
	.tl{
			display: flex;
			
			
		}
	

	
</style>